<template>
  <div class="flex column module-inner">
    <div class="module-title flex-center">赋能全球工业绿色节能生产</div>
    <div id="container" ref="container" class="content"/>
  </div>
</template>
<script>
import 'echarts-gl'
// import "/src/utils/world.js"
import * as echarts from 'echarts';

const world = require('@/utils/countries.geo.json')
export default {
  name: "Earth",
  components: {},
  props: {
    baseList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      charts: null
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    //离开页面时注销echart
    // echarts.dispose(this.dispose)
    this.charts.dispose()
    this.charts = null
  },
  methods: {
    init() {
      // 放置数据
      let data = [{name: "溧阳 杭州", lng: 119.48, lat: 31.42},
        {name: " ", lng: 120.21, lat: 30.20},
        {name: "宜宾", lng: 104.62, lat: 28.77},
        {name: "香港 东莞", lng: 114.16, lat: 22.27},
        {name: " ", lng: 113.75, lat: 23.02},
        {name: "德国", lng: 13.25, lat: 52.30},
        {name: "美国", lng: -77.01, lat: 38.91},
        {name: "印尼", lng: 106.49, lat: -6.10},
        {name: "匈牙利", lng: 19, lat: 47.5}]
      const chartData = data.reduce((cur, item) => {
        return [...cur, {
          name: item.name,
          value: [item.lng, item.lat, 0],
          symbolSize: 16,
        }]
      }, [])
      const lineArray = []

      data.forEach((item, index) => {
        // lineArray.push([[119.48, 31.42, 7], [item.lng, item.lat, 1]])
        lineArray.push({coords: [[119.48, 31.42, 7], [item.lng, item.lat, 1]]})
        lineArray[index].lineStyle = {
          width: 1.5,
          color: '#a5ecff',
          opacity: .1,
        }
      })

      // this.baseList.forEach((item) => {
      //   lineArray.push({coords: [[119.48, 31.42, 7], [item.lng, item.lat, 1]]})
      // })
      // lineArray.shift()
      const canvas = document.createElement("canvas")
      const mapChart = echarts.init(canvas, null, {
        width: 4096,
        height: 2048
      })
      echarts.registerMap('world', world)
      mapChart.setOption({
        backgroundColor: 'rgb(0, 0, 16)',
        geo: {
          name: '地图',
          //   type: 'map',
          map: 'world',
          itemStyle: {
            areaColor: 'rgb(8, 15, 27)', //地块颜色
            borderColor: 'rgb(108,118,255)'
          },
          hoverAnimation: false,
          emphasis: {
            disabled: true,
            label: {
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 10,
                fontFamily: "Arial"
              }
            },
            itemStyle: {
              areaColor: 'rgb(8, 15, 27)'
            }
          },
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90]
          ],
          regions: [
            {
              name: "China",
              itemStyle: {
                areaColor: 'rgb(108,118,255,.6)' // 区域颜色,
              }
            },
            {
              name: "Taiwan",
              itemStyle: {
                areaColor: 'rgb(108,118,255,.6)' // 区域颜色,
              }
            },
            {
              name: "Hungary",
              itemStyle: {
                areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              }
            },

            {
              name: "United States of America",
              itemStyle: {
                areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              }
            },

            {
              name: "Germany",
              itemStyle: {
                areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              }
            },
            // {
            //   name: "Laos",
            //   itemStyle: {
            //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
            //   }
            // },
            //
            // {
            //   name: "Cambodia",
            //   itemStyle: {
            //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
            //   }
            // },
            // {
            //   name: "Thailand",
            //   itemStyle: {
            //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
            //   }
            // },
            // {
            //   name: "Burma",
            //   itemStyle: {
            //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
            //   }
            // },
            // {
            //   name: "Malaysia",
            //   itemStyle: {
            //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
            //   }
            // },
            // {
            //   name: "Singapore",
            //   itemStyle: {
            //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
            //   }
            // },
            {
              name: "Indonesia",
              itemStyle: {
                areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              }
              // }, {
              //   name: "Brunei",
              //   itemStyle: {
              //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              //   }
              // }, {
              //   name: "Philippines",
              //   itemStyle: {
              //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              //   }
              // },
              // {
              //   name: "East Timor",
              //   itemStyle: {
              //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              //   }
              // }, {
              //   name: "Myanmar",
              //   itemStyle: {
              //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              //   }
              // }, {
              //   name: "Vietnam",
              //   itemStyle: {
              //     areaColor: 'rgb(108,118,255,.4)' // 区域颜色
              //   }
            },

          ]
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 3,
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              fontSize: 36,
              fontWeight: 1000,
              show: true,
              distance: 12,
              position: 'top',
              formatter: '{b}'
            },
            itemStyle: {
              normal: {
                color: '#f5f802',
                opacity: 0.8,
                borderWidth: 0,
              }
            },
            emphasis: {
              itemStyle: {
                color: 'rgba(153,0,0,1.0)'
              },
              label: {
                show: true
              }
            },
            tooltip: {
              show: true,
              fixed: true,
              borderRadius: 2,
              textStyleAuto: false,
              shadow: true,
              follow: true,
              textStyle: {
                fontFamily: 'Verdana',
                fontSize: 20,
                color: 'rgba(255,255,255,1.0)',
                fontWeight: 'bold',
                fontStyle: ''
              },
              formatter: function (params) {
                const data = params.data
                return `经度：${data.value[0]}<br/>纬度: ${data.value[1]}<br/> 名称:${data.name}`
              },
              borderColor: 'rgb(0,0,0)',
              borderWidth: 0,
              backgroundColor: 'rgba(0,0,0,0.4980392156862745)',
              extraCssText:
                'border-radius:2px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);',
              background: {
                type: 'color',
                value: 'rgba(0,0,0,1.0)'
              },
              opacity: 0.5
            },
            blendMode: 'lighter',
            symbol: 'pin',
            data: chartData
          }
        ]
      })
      this.charts = mapChart


      // no1
      this.charts = echarts.init(this.$refs.container)
      const option = {
        globe: {
          environment: '/image/bg.png',
          viewControl: {
            distance: 190,
            autoRotate: true,
            autoRotateDirection: 'cw',
            targetCoord: [116.46, 15.92]
          },
          // atmosphere: {
          //   show: true, // 是否显示外部大气层
          //   color: '#42a1ff',
          //   glowPower: 20, // 外部大气层发光功率
          //   innerGlowPower: 4, // 外部大气层内发光功率
          // },
          light: {
            ambient: {intensity: 1},
            main: {
              color: 'rgba(255,255,255,1.0)',
              intensity: 1,
              shadow: true,
              alpha: 0,
              beta: 0
            },
            ambientCubemap: {
              texture: '/image/texture.hdr',
              exposure: 1,
              diffuseIntensity: 5,
              specularIntensity: 20
            }
          },
          globeRadius: 100,
          globeOuterRadius: 100,
          shading: 'realistic',
          baseTexture: mapChart,
          // baseTexture: '/image/world.topo.bathy.200401.jpg',
          heightTexfture: '/image/heightTexture.png',
          realisticMaterial: {
            roughness: 1,
            metalness: 1
          },
          postEffect: {
            enable: true
          }
        },
        series: [
          {
            type: 'lines3D',
            symbol: ['diamond', 'arrow'],//两端的图片样式
            polyline: false,
            effect: {
              show: true,//动画效果
              period: 4, //箭头指向速度，值越小速度越快
              trailWidth: 3,
              trailLength: 1, //特效尾迹长度[0,1]值越大，尾迹越长重 //图标大小
              trailColor: '#a5ecff',
            },
            lineStyle: {
              //   轨迹线
              width: 2,
              color: 'red',
              opacity: 1,
            },
            opacity: .3,
            data: lineArray
          },
        ],
        title: {
          left: 'left',
          text: '',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontSize: 21.333333333333332,
            color: 'rgba(255,255,255,1.0)',
            fontWeight: '',
            fontStyle: ''
          }
        },

        visualMap: {
          show: false,
          type: 'continuous',
          orient: 'vertical',
          left: 'left',
          top: 'bottom',
          textStyle: {
            fontFamily: '微软雅黑',
            fontSize: 14.666666666666666,
            color: 'rgba(255,255,255,1.0)',
            fontWeight: '',
            fontStyle: ''
          },
          inRange: {
            symbolSize: [20, 20],
            color: ['rgba(0,144,213,1.0)', 'rgba(0,144,213,1.0)']
          }
        },
      }
      this.charts.setOption(option, true)
      this.child = {
        resize: this.charts.resize
      }
    },
  }

}
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;

  .module-title {
    flex: 61;
    background: url("/image/ah_image.png") no-repeat center;
    background-size: 100% 100%;
    @include vw(24);
    font-weight: 800;
    margin-bottom: px2vw(6);
  }

  .content {
    flex: 585;
    background: url('~@/assets/image/module-content.png') no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
